<template>
  <view class="my-container">
    <!-- 自定义导航栏 -->
    <navigation-bar>
      <navigator class="top-left-navigator iconfont" hover-class="none" open-type="navigateBack">&#xe61a;
      </navigator>
    </navigation-bar>
    <view class="my-main-wrapper" :style="{height: `calc(100% - ${statusbarHeight}px - ${bar_topHeight}px)`}">
      <z-paging ref="Paging" :fixed="false" :use-cache="false" :refresher-only="true" @onRefresh="onRefresh">
        <!-- 个人信息面板 -->
        <view class="my-panel">
          <!-- 头像 -->
          <view class="avatar-box">
            <image class="avatar-pic" src="/static/avatar.png" mode="aspectFill"></image>
            <i class="sex-i iconfont" style="color: #16A9FA;">&#xe622;</i>
          </view>
          <!-- 个人信息 -->
          <view class="my-info">
            <view class="name">
              暗裔 亚克托斯
            </view>
            <navigator url="/subpkg/my-center/my-center" class="tip" hover-class="none">
              进入您的Campus circle中心
            </navigator>
            <view class="focus">
              <navigator url="/subpkg/my-focus/my-focus?pageType=focusing" hover-class="none"><text
                  class="focus-num">66</text>正在关注
              </navigator>
              <navigator url="/subpkg/my-focus/my-focus?pageType=befocused" class="second-a" hover-class="none">
                <text class="befocused-num">66</text>被关注
              </navigator>
            </view>
            <view class="decoration">
              我不是要与你为敌，我是要与世界为敌！
            </view>
          </view>
          <!-- 前往Campus circle中心 -->
          <navigator url="/subpkg/my-center/my-center" class="right-arrow .iconfont" hover-class="none">
            &#xe624;
          </navigator>
        </view>
        <!-- Tab 切换栏 -->
        <view class="post-tabs">
          <view class="tabs-inner" @click.capture="onClickTab">
            <v-tabs v-model="current" :tabs="tabs" @change="changeTab" :scroll="false" height="90rpx"
              activeColor="#0191FF" color="#000" fontSize="32rpx" lineHeight="4rpx" lineColor="#0191FF" :lineScale="1"
              lineRadius="0"></v-tabs>
          </view>
        </view>
        <!-- 帖子内容 Swiper -->
        <swiper :duration="300"
          :style="{height: swiperHeight + 'px','min-height': `calc(100vh - ${statusbarHeight}px - ${bar_topHeight}px - ${bangs_Height}px - 90rpx)`}"
          class="swiper-wrap" :current="current" @change="onSwiperChange">
          <swiper-item class="swiper-item" :class="'swiper-item' + index" v-for="(item, index) in tabs" :key="item">
            <z-paging ref="paging"
              :empty-view-super-style="{'max-height': `calc(100vh - ${statusbarHeight}px - ${bar_topHeight}px - ${bangs_Height}px - 90rpx)`}"
              :use-page-scroll="true" :use-cache="false" :refresher-enabled="false" :show-refresher-when-reload="false"
              :loading-more-enabled="index === current" :v-model="mapPost[index]" :hide-empty-view="index !== current"
              @contentHeightChanged="ContentHeightChanged" @query="onQuery">
              <view style="padding: 20rpx 40rpx 0;" v-for="post in mapPost[index]" :key="post.id">
                <post-item :post="post" page="my" :post-type="tabs[index]" @edit-handler="onClickEdit"></post-item>
              </view>
            </z-paging>
          </swiper-item>
        </swiper>
      </z-paging>
    </view>
    <!-- 底部弹窗 -->
    <view class="bottom-popup">
      <cc-popup :show="show_Model" @click-model="show_Model = false" :constant="true">
        <view class="edit-post-box">
          <view class="edit-list">
            <view class="edit-item" @click="closeModel">
              <view class="edit-icon iconfont">
                &#xe61f;
              </view>
              <view class="edit-name">
                结束
              </view>
            </view>
            <view class="edit-item" @click="closeModel">
              <view class="edit-icon iconfont">
                &#xe61e;
              </view>
              <view class="edit-name">
                删除
              </view>
            </view>
          </view>
        </view>
      </cc-popup>
    </view>

  </view>
</template>

<script>
  import ZPMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'
  import naviHeightMix from "@/mixins/get-NavigationBar_Height.js"
  import {
    mapState
  } from "vuex";
  import postItem from "@/components/posts-item/posts-item"
  import ccPopup from "@/components/cc-popup/cc-popup.vue"
  export default {
    mixins: [naviHeightMix, ZPMixin],
    computed: {
      ...mapState("m_posts", ["idlePostsList", "buyPostsList", "helpPostsList", "commonPostsList"]),
      ...mapState('m_app', ["bangs_Height"])
    },
    data() {
      return {
        current: 0,
        tabs: ['闲置', '求购', '求助', '帖子'],
        mapPost: [],
        postList: [],
        show_Model: false,
        swiperHeight: 0,
      }
    },
    onLoad() {
      // 演示数据
      this.postList = [
        this.idlePostsList, this.buyPostsList, this.helpPostsList, this.commonPostsList
      ]

      this.mapPost = [
        this.idlePostsList,
        [],
        [],
        []
      ]
      this.$refs.Paging.reload()
    },
    methods: {
      // 点击相同 Tab 刷新页面
      onClickTab: function(e) {
        const X = e.target.x
        if (X > uni.upx2px(50) && X < uni.upx2px(50 + 162.5)) {
          if (this.current === 0) {
            this.$refs.Paging.reload()
          }
        } else if (X > uni.upx2px(50 + 162.5) && X < uni.upx2px(50 + 162.5 * 2)) {
          if (this.current === 1) {
            this.$refs.Paging.reload()
          }
        } else if (X > uni.upx2px(50 + 162.5 * 2) && X < uni.upx2px(50 + 162.5 * 3)) {
          if (this.current === 2) {
            this.$refs.Paging.reload()
          }
        } else if (X > uni.upx2px(50 + 162.5 * 3) && X < uni.upx2px(50 + 162.5 * 4)) {
          if (this.current === 3) {
            this.$refs.Paging.reload()
          }
        }
      },
      // 切换 Tab 
      changeTab: function(index) {

        this.mapPost[this.current] = []
        this.mapPost[index] = this.postList[index]
        this.$refs.Paging.reload()

        this.current = index
      },
      // 轮播图切换
      onSwiperChange: function(e) {
        if (e.detail.source === '') return

        this.mapPost[this.current] = []
        this.mapPost[e.detail.current] = this.postList[e.detail.current]
        this.$refs.Paging.reload()

        this.current = e.detail.current
      },
      // 点击编辑帖子
      onClickEdit: function() {
        this.show_Model = true
      },
      // 关闭操作面板
      closeModel: function() {
        this.show_Model = false
      },
      ContentHeightChanged: function(height) {
        this.swiperHeight = height
      },
      // 请求开始
      onQuery: function() {
        console.log('ok');
        this.$refs.paging[this.current].complete(this.mapPost[this.current])

        setTimeout(() => {
          this.$refs.Paging.endRefresh()
        }, 500)
      },
      // 下拉刷新
      onRefresh: function() {
        this.$refs.paging[this.current].reload()
      }
    },
    components: {
      postItem,
      ccPopup
    }
  }
</script>

<style lang="scss">
  .my-container {
    width: 100%;
    height: 100%;

    .top-left-navigator {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 20px;
      font-size: 16px;
      line-height: 16px;
      color: #000;
    }

    .my-main-wrapper {
      .my-panel {
        box-sizing: border-box;
        overflow: hidden;
        width: 100%;
        height: 200rpx;
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        padding: 0 30rpx;

        .avatar-box {
          position: relative;

          .avatar-pic {
            width: 120rpx;
            height: 120rpx;
            border-radius: 80rpx;
          }

          .sex-i {
            position: absolute;
            bottom: -8rpx;
            right: -4rpx;
            font-size: 40rpx;
            line-height: 40rpx;
          }
        }

        .my-info {
          width: 65%;
          margin-left: 46rpx;
          font-size: 28rpx;

          .name {
            font-size: 34rpx;
          }

          .tip {
            padding: 6rpx 0;
            color: #0191FF;
          }

          .focus {
            padding: 6rpx 0;
            display: flex;

            .focus-num,
            .befocused-num {
              color: #0191FF;
              margin-right: 8rpx;
            }

            .second-a {
              margin-left: 30rpx;
            }
          }

          .decoration {
            padding: 6rpx 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .right-arrow {
          font-size: 32rpx;
          line-height: 32rpx;
          color: #000;
        }
      }

      .post-tabs {
        position: sticky;
        top: -1rpx;
        display: flex;
        width: 100%;
        height: 90rpx;
        background-color: #FFF;
        z-index: 999;
        box-sizing: border-box;
        padding: 0 50rpx;

        .tabs-inner {
          width: 100%;
          font-weight: 600;

          // tabs组件样式覆盖
          .v-tabs__container-item {
            font-weight: 800 !important;
          }
        }
      }

      .swiper-wrap {
        .swiper-item {}
      }
    }

    .bottom-popup {
      .edit-post-box {
        height: 400rpx;
        background-color: #FFF;
        border-top-left-radius: 26rpx;
        border-top-right-radius: 26rpx;

        .edit-list {
          padding-top: 60rpx;

          .edit-item {
            display: flex;
            align-items: center;
            height: 130rpx;

            .edit-icon {
              font-size: 52rpx;
              line-height: 52rpx;
              margin-left: 48rpx;
            }

            .edit-name {
              font-size: 28rpx;
              margin-left: 36rpx;
            }
          }
        }
      }
    }
  }
</style>